<template>
  <div>
    <h2>会员信息列表</h2>
    真实姓名
    <input type="text" v-model="state.name">
    手机号
    <input type="text" v-model="state.phone">
    身份证号
    <input type="text" v-model="state.card">
    登录时间
    <input type="date">
    会员卡号
    <input type="text" v-model="state.code">

    <input type="button" value="查询" @click="getList">
    <table border="1">
      <tr>
        <td>会员编号</td>
        <td>真实姓名</td>
        <td>手机号</td>
        <td>身份证号</td>
        <td>会员卡号</td>
        <td>会员等级</td>
        <td>地址</td>
        <td>消费金额</td>
        <td>创建时间</td>
      </tr>
      <tr v-for="item in list">
        <td>{{item.m_Id}}</td>
        <td>{{item.m_Name}}</td>
        <td>{{item.m_Phone}}</td>
        <td>{{item.m_Card}}</td>
        <td>{{item.m_Code}}</td>
        <td>{{item.m_Grape}}</td>
        <td>{{item.m_Price}}</td>
        <td>{{item.m_Addr}}</td>
        <td>{{item.m_CreateDate.split("T")[0]}}</td>
      </tr>
    </table>
  </div>
</template>

<script setup lang="ts">
import { onMounted, reactive,toRefs } from 'vue';
import axios from 'axios';
import { useRouter } from 'vue-router';
const router = useRouter()

const data:any = reactive({
  state:{
    name:'',
    phone:'',
    card:'',
    code:''
  },
  list:[]
})

let {state,list} = toRefs(data)

onMounted(()=>{
  getList()
})

const getList=()=>{
  axios({
    url:'/api/Member/GetMemberList',
    method:'get',
    params:state.value
  })
  .then(res=>{
    console.log(res)
    list.value = res.data.data
  })
  .catch(err=>{
    console.log(err)
  })
}
</script>

<style scoped>

</style>